<template>
  <div class="block-tabs-list flex ju-ar">
    <div
      class="tabs-list-li flex-col flex-a mar-t20"
      v-for="(item, index) in blockTabs.tabsList"
      :key="index"
      @click="tabsChange(index)"
    >
      <div class="li-info flex-a">
        <el-image 
            style="width: 28px; height: 28px;" 
            :src="getAssetsImages(item.img)"
            v-if="item.img"
        />
        <div class="mar-l10">{{ item.text || item.title }}</div>
      </div>
      <div class="li-line mar-t18" v-if="index === blockTabs.currentTabs"></div>
    </div>
  </div>
</template>

<script setup>
// tabs组件
import { reactive, defineProps, defineEmits, watchEffect } from "vue"
const props = defineProps({
    tabsList: {
        type: Array,
        default: []
    }
})
const emit = defineEmits(["changeTabs"])
const blockTabs = reactive({
  tabsList: [],
  currentTabs: 0,
});

const tabsChange = index => { 
    blockTabs.currentTabs = index
    emit('changeTabs', index)
}
watchEffect(() => { 
  blockTabs.tabsList = props.tabsList
})
const getAssetsImages = name => {
  return new URL(`/src/assets/serviceImgs/${name}.png`, import.meta.url).href;
};
</script>

<style lang="scss" scoped>
.block-tabs-list {
  .tabs-list-li {
    width: 15%;
    .li-info {
      font-size: 16px;
      font-family: PingFang SC, PingFang SC-Semibold;
      font-weight: Semibold;
      text-align: left;
      color: #202020;
    }
    .li-line {
      width: 100%;
      height: 4px;
      background: #0052d9;
    }
  }
}
</style>
